import React, { useDeferredValue, useMemo, useState } from 'react'

import List from './18-List'

export default function App() {

    const [str, setStr] = useState('')

    // 可以通过自身数据得到一个新的数据
    // useDeferredValue 是一个 React Hook，可以让你延迟更新 UI 的某些部分。
    const deferredValue = useDeferredValue(str)
    // console.log(deferredValue);
    const list = useMemo(() => {
        return (<List str={deferredValue} />)
    }, [deferredValue])

    return (
        <div>
            <input type="text" value={str} onChange={e => setStr(e.target.value)} />
            {list}
        </div>
    )
}

